<template>
  <div>
    <div class="form-box">
      <form @submit='formSubmit'>
        <span class="s1">注册</span>
        <input type="text" placeholder="真实姓名" v-model="inputName" name="name"  @blur="nameBlur">
        <input type="text" placeholder="学号" v-model="inputSno" name="sno"  @blur="snoBlur">
        <input type="password" placeholder="设置密码" v-model="inputPassword" name="password" @blur="passwordBlur">
        <input type="password" placeholder="确认密码" v-model="inputPassword1" name="password1" @blur="password1Blur">
        <input type="email" password placeholder="邮箱" v-model="inputEmail" name="email" @blur="emailBlur">
        <input type="number" placeholder="手机号" v-model="inputPhone" name="phone" @blur="phoneBlur">
        <radio-group @change="radioGroup">
          <radio value="0" name="isAdmin" checked="true"/>志愿者
          <radio value="1" name="isAdmin"/>志愿者组织
        </radio-group>
        <button class="btn1" form-type='submit'>注册</button>
      </form>
      
    </div>
  </div>
</template>

<script>
import request from '../../utils/request'
  export default{
    data(){
      return {
        inputName: '',
        flagName:1,
        inputPassword:'',
        flagPassword:1,
        inputPassword1:'',
        flagPassword1:1,
        inputEmail:'',
        flagEmail:1,
        inputPhone:'',
        flagPhone:1,
        inputSno:'',
        flagSno:1,
        isAdmin:'0'
        
      }
    },
    methods: {
        radioGroup(e){
          this.isAdmin = e.mp.detail.value
          console.log(this.isAdmin)
        },
        async formSubmit(e){ 
        let data=e.mp.detail.value;
        if(this.flagName===0&&this.flagPassword===0&&this.flagPassword1===0&&this.flagEmail===0&&this.flagPhone===0){
        let user ={
              openid:wx.getStorageSync('token'),
              name:data.name,
              password:data.password,
              email:data.email,
              phone:data.phone,
              sno:data.sno,
              isAdmin:this.isAdmin
            }
        let result = await request('/user/register',{user},'POST');
        console.log(result)
        if(result=='0'){
          wx.showToast({
            title: '成功',
            duration: 5000
          })
          wx.navigateBack({
            delta: 1
          })
        }else{
          wx.showToast({
            title: '失败',
            duration: 5000
          })
        
        }
        }
       },

        nameBlur(){
          if(!(/^[\u4E00-\u9FFF]+$/.test(this.inputName))){
            wx.showToast({
            title: '请输入真实姓名',
            duration: 3000
          })
            this.flagName=1;
          }else{
            this.flagName=0;
          }
        },

        snoBlur(){
          if(!(/^(?:(?!\s).){8}$/.test(this.inputSno))){
            wx.showToast({
            title: '请输入学号',
            duration: 3000
          })
            this.flagSno=1;
          }else{
            this.flagSno=0;
          }
        },

        passwordBlur(){
          if(!(/^(?:(?!\s).){6,}$/.test(this.inputPassword))){
            wx.showToast({
            title: '密码不能少于6为，且不能有空格',
            duration: 3000
          })
          this.flagPassword=1;
          }else{
            this.flagPassword=0;
          }
        },

        password1Blur(){
          if(this.inputPassword!==this.inputPassword1){
            wx.showToast({
            title: '密码不一致',
            duration: 3000
          })
            this.flagPassword1=1;
          }else{
            this.flagPassword1=0;
          }
        },

        emailBlur(){
          if(!(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(this.inputEmail))){
            wx.showToast({
            title: '请输入有效邮箱',
            duration: 3000
          })
            this.flagEmail=1;
          }else{
            this.flagEmail=0;
          }
        },


        phoneBlur(){
          if(!(/^(1(([35][0-9])|(47)|[8][01236789]))\d{8}$/.test(this.inputPhone))){
            wx.showToast({
            title: '请输入有效手机号码',
            duration: 3000
          })
            this.flagPhone=1;
          }else{
            this.flagPhone=0;
          }
        }
  
    },
  }

</script>

<style scoped>

.form-box{
  border:1px rgb(233, 209, 209) solid;
  margin:auto;
  margin-top:20px;
  width:90%;
  box-shadow: -10px 10px rgb(233, 209, 209);
}

.form-box .s1{
  margin-left: 150px;
  font-size: 23px;
  color: red;
  
}
.form-box input{
  border-bottom: 1px solid rgb(223, 197, 197);
  margin:25px;

}

.form-box .i1{
  border-bottom: 1px solid rgb(223, 197, 197);
  margin:25px;
  margin-right: 170px;
  

}

.form-box .btn1{
  background: red;
  color:white;
  margin:20px;
  margin-top: 40px;
}

</style>
